<template>
	<view class="container">
		<view class="a">
			<image class="icon1" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/58cd2202010201731451809.png"
			 mode=""></image>
			<view class="line line1">
				<image class="icon2" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/defd1202010201731458385.png"
				 mode=""></image>
				<view class="line-a"></view>
				<view class="line-b"></view>
			</view>
			<view class="line line2">
				<view class="line-b"></view>
				<view class="line-a"></view>
				<image class="icon2" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/defd1202010201731458385.png"
				 mode=""></image>
			</view>
			<text class="title">惠•置换 会•生活</text>
			<!-- #ifndef MP-WEIXIN -->
			<text class="content">
				【黄金置换】：购黄金，送金豆，玩转“金”智人生。<br /><br />
				购买黄金的款项=赠送金豆数量<br /><br />
				金豆可再次转化，<br /><br />
				三种方案：<br /><br />
				1.置换黄金；<br /><br />
				2.置换资产；<br /><br />
				3.金豆增值。
			</text>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text class="content">
				【黄金置换】：购黄金，送金豆，玩转“金”智人生。\n
				购买黄金的款项=赠送金豆数量\n
				金豆可再次转化，\n
				三种方案：\n
				1.置换黄金；\n
				2.置换资产；\n
				3.金豆增值。
			</text>
			<!-- #endif -->

		</view>
		<view class="b">
			<image class="icon1" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/0014e202010201731456606.png"
			 mode=""></image>
			<view class="icon2"></view>
			<view class="icon3"></view>
			<view class="icon4"></view>
			<view class="icon5"></view>
			<image class="icon6" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/0014e202010201731456606.png"
			 mode=""></image>
			<text class="title">三种方案</text>
			<!-- #ifndef MP-WEIXIN -->
			<text class="content">
				A，置换黄金：限定期限内，金豆每天平均释放到用户账户，每30天即可用已释放的金豆置换黄金一次。<br /><br />
				B、置换资产：用户账户上的金豆，无需释放，可直接置换等标资产（汽车、房产、品牌商品）。<br /><br />
				C、金豆增值：金豆可以相应比例置换成红，蓝，黄贝壳。
			</text>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text class="content">
				A，置换黄金：限定期限内，金豆每天平均释放到用户账户，每30天即可用已释放的金豆置换黄金一次。\n
				B、置换资产：用户账户上的金豆，无需释放，可直接置换等标资产（汽车、房产、品牌商品）。\n
				C、金豆增值：金豆可以相应比例置换成红，蓝，黄贝壳。
			</text>
			<!-- #endif -->
		</view>
		<view class="b">
			<text class="title">获得金豆的方式</text>
			<!-- #ifndef MP-WEIXIN -->
			<text class="content">
				1、购买黄金<br /><br />
				2、好友赠送<br /><br />
				3、推荐好友购买黄金成功<br /><br />
				4、推荐好友注册成功（每天可直接推荐多人次注册激活成功）
			</text>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text class="content">
				1、购买黄金\n
				2、好友赠送\n
				3、推荐好友购买黄金成功\n
				4、推荐好友注册成功（每天可直接推荐多人次注册激活成功）
			</text>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		onLoad() {}
	}
</script>
<style>
	page {
		background-color: #F3CE53;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 80rpx 0;

		.a {
			position: relative;
			width: 750rpx;
			padding: 172rpx 0 0;
			box-sizing: border-box;
			background: url(https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/2b29b202010211144092537.png) no-repeat;
			background-size: 100% 172rpx;

			.icon1 {
				position: absolute;
				top: -30rpx;
				right: 37rpx;
				width: 96rpx;
				height: 104rpx;
			}

			.line {
				position: absolute;
				display: flex;
				align-items: center;

				.icon2 {
					margin-right: 10rpx;
					width: 49rpx;
					height: 42rpx;
				}

				.line-a {
					width: 576rpx;
					height: 0;
					border-bottom: 1rpx dashed #E9AC19;
				}

				.line-b {
					width: 12px;
					height: 12px;
					background: #E9AC19;
					border-radius: 50%;
				}
			}

			.line1 {
				left: 30rpx;
				top: 144rpx;
			}

			.line2 {
				left: 60rpx;
				bottom: 70rpx;

				.icon2 {
					margin-left: 10rpx;
					transform: rotate(180deg);
				}
			}

			.title {
				position: absolute;
				width: 100%;
				top: 76rpx;
				left: 0;
				text-align: center;
				line-height: 80rpx;
				font-weight: bold;
				color: #E9AC19;
				font-size: 36rpx;
			}

			.content {
				display: block;
				width: 750rpx;
				padding: 40rpx 60rpx 140rpx;
				box-sizing: border-box;
				border-radius: 0 0 30rpx 30rpx;
				text-align: justify;
				font-size: 28rpx;
				color: #333333;
				line-height: 43rpx;
				background-color: #fff;
			}
		}

		.b {
			position: relative;
			width: 750rpx;
			padding-top: 70rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon1 {
				position: absolute;
				left: 100rpx;
				top: -6rpx;
				width: 80rpx;
				height: 80rpx;
			}

			.icon2 {
				position: absolute;
				top: 0;
				right: 96rpx;
				width: 57rpx;
				height: 57rpx;
				border-radius: 50%;
				border: 6rpx solid rgba(255, 255, 255, .5);
			}

			.icon3 {
				position: absolute;
				top: 25rpx;
				right: -96rpx;
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				border: 6rpx solid rgba(255, 255, 255, .5);
			}

			.icon4 {
				position: absolute;
				bottom: -60rpx;
				left: 0rpx;
				width: 118rpx;
				height: 118rpx;
				border-radius: 50%;
				border: 6rpx solid rgba(255, 255, 255, .5);
			}

			.icon5 {
				position: absolute;
				bottom: -83rpx;
				left: 76rpx;
				width: 77rpx;
				height: 77rpx;
				border-radius: 50%;
				border: 6rpx solid rgba(255, 255, 255, .5);
			}

			.icon6 {
				position: absolute;
				bottom: -62rpx;
				right: 9rpx;
				width: 127rpx;
				height: 127rpx
			}

			.title {
				padding: 0 30rpx;
				height: 80rpx;
				background: #FFFFFF;
				box-shadow: 0px 7rpx 27rpx 0px rgba(206, 149, 11, 0.4);
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				font-weight: bold;
				color: #E9AC19;
				font-size: 36rpx;
				position: relative;
				z-index: 1;
			}

			.content {
				margin-top: -40rpx;
				text-align: justify;
				font-size: 28rpx;
				color: #333333;
				line-height: 43rpx;
				width: 690rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				padding: 87rpx 40rpx 40rpx;
				box-sizing: border-box;
			}
		}
	}
</style>
